<template>
  <div class="search">
    <header class="search-header">
      <div class="search-header-back" @click="back">
        <van-icon name="arrow-left" size=".3rem" />
      </div>
      <div class="search-header-input">
        <van-search
          v-model="value"
          shape="round"
          placeholder="请输入搜索关键词"
          @update:model-value="search"
          @search="go(value)"
        />
      </div>
      <div class="search-header-btn" @click="go(value)">搜索</div>
    </header>
    <div class="search-res" v-if="value">
      <div
        class="search-res-item"
        v-for="(item, i) in res"
        :key="i"
        @click="go(item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const router = useRouter();
    const store = useStore();
    const start = reactive({
      value: "",
    });
    const back = () => {
      router.go(-1);
    };
    const search = (val: string) => {
      if (val !== "") {
        console.log(val);
        store.dispatch({
          type: "search/getres",
          value: val,
        });
      }
    };
    const res = computed(() => {
      return store.state.search.res;
    });
    const go = (value: string) => {
      if (value) {
        window.location.href = `http://qinqin.net/index.php?input=1&screen=%5B%5D&activity=%5B%5D&brand=%5B%5D&r=index%2Fclassify&px=renqi&row=1&kw=${value}&activity_type=0&button_bnt=&`;
      }
    };
    return {
      ...toRefs(start),
      back,
      search,
      go,
      res,
    };
  },
});
</script>
<style lang="stylus">
.search
    background #f5f5f5
    .search-header
        display flex
        background #fff
        justify-content center
        position sticky
        top 0
        left 0
        right 0
        height .6rem
        align-items center
        .search-header-back
            width .5rem
            display flex
            align-items center
            justify-content center
        .search-header-input
            flex 1
        .search-header-btn
            width .5rem
            font-size .16rem
            text-align center
    .search-res
        position fixed
        top .6rem
        left 0
        right 0
        bottom 0
        background #fff
        .search-res-item
            font-size .14rem
            line-height .4rem
            border-bottom 1px solid #ccc
            text-indent 1em
</style>
